diff --git a/apps/client/src/widgets/collections/interface.ts b/apps/client/src/widgets/collections/interface.ts index bd80b4afd..118599260 100644 --- a/apps/client/src/widgets/collections/interface.ts +++ b/apps/client/src/widgets/collections/interface.ts @@ -5,6 +5,8 @@ export type ViewTypeOptions = typeof allViewTypes[number]; export type ViewModeMedia = "screen" | "print"; +export type ProgressChangedFn = (progress: number) => void; + export interface ViewModeProps { note: FNote; notePath: string; @@ -17,5 +19,5 @@ export interface ViewModeProps { saveConfig(newConfig: T): void; media: ViewModeMedia; onReady(): void; - onProgressChanged?(progress: number): void; + onProgressChanged?: ProgressChangedFn; } diff --git a/apps/client/src/widgets/collections/presentation/index.tsx b/apps/client/src/widgets/collections/presentation/index.tsx index ca236a46c..0a3d36f65 100644 --- a/apps/client/src/widgets/collections/presentation/index.tsx +++ b/apps/client/src/widgets/collections/presentation/index.tsx @@ -14,14 +14,14 @@ import { t } from "../../../services/i18n"; import { DEFAULT_THEME, loadPresentationTheme } from "./themes"; import FNote from "../../../entities/fnote"; -export default function PresentationView({ note, noteIds, media, onReady }: ViewModeProps<{}>) { +export default function PresentationView({ note, noteIds, media, onReady, onProgressChanged }: ViewModeProps<{}>) { const [ presentation, setPresentation ] = useState(); const containerRef = useRef(null); const [ api, setApi ] = useState(); const stylesheets = usePresentationStylesheets(note, media); function refresh() { - buildPresentationModel(note).then(setPresentation); + buildPresentationModel(note, onProgressChanged).then(setPresentation); } useTriliumEvent("entitiesReloaded", ({ loadResults }) => { diff --git a/apps/client/src/widgets/collections/presentation/model.ts b/apps/client/src/widgets/collections/presentation/model.ts index 92b7ffe76..f1c6cef77 100644 --- a/apps/client/src/widgets/collections/presentation/model.ts +++ b/apps/client/src/widgets/collections/presentation/model.ts @@ -1,6 +1,7 @@ import { NoteType } from "@triliumnext/commons"; import FNote from "../../../entities/fnote"; import contentRenderer from "../../../services/content_renderer"; +import { ProgressChangedFn } from "../interface"; type DangerouslySetInnerHTML = { __html: string; }; @@ -22,14 +23,26 @@ export interface PresentationModel { slides: PresentationSlideModel[]; } -export async function buildPresentationModel(note: FNote): Promise { +export async function buildPresentationModel(note: FNote, onProgressChanged?: ProgressChangedFn): Promise { const slideNotes = await note.getChildNotes(); - const slides: PresentationSlideModel[] = await Promise.all(slideNotes.map(async slideNote => ({ - ...(await buildSlideModel(slideNote)), - verticalSlides: note.type !== "search" ? await buildVerticalSlides(slideNote) : undefined - }))); + onProgressChanged?.(0.3); + const total = slideNotes.length; + let completed = 0; + const slidePromises = slideNotes.map(slideNote => (async () => { + const base = await buildSlideModel(slideNote); + const verticalSlides = note.type !== "search" ? await buildVerticalSlides(slideNote) : undefined; + const slide: PresentationSlideModel = { ...base, verticalSlides }; + completed++; + onProgressChanged?.(Math.min(0.3 + (completed / total) * 0.4, 0.7)); + return slide; + })()); + + const slides: PresentationSlideModel[] = await Promise.all(slidePromises); + + onProgressChanged?.(0.7); postProcessSlides(slides); + onProgressChanged?.(1); return { slides }; }