mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-14 07:04:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix reveal (#1563)

Browse source 
Fix race condition in slide show

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-10-16 21:45:22 +02:00 • committed by GitHub
parent 3958ef550d
commit e84ed1398f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 84 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/markdown-renderer/hooks/use-reveal.ts
View file

@ -4,22 +4,39 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import Reveal from 'reveal.js'
import { Logger } from '../../../utils/logger'
import { SlideOptions } from '../../common/note-frontmatter/types'
const log = new Logger('reveal.js')
export const useReveal = (content: string, slideOptions?: SlideOptions): void => {
export enum REVEAL_STATUS {
NOT_INITIALISED,
INITIALISING,
INITIALISED
}
export interface SlideState {
indexHorizontal: number
indexVertical: number
}
const initialSlideState: SlideState = {
indexHorizontal: 0,
indexVertical: 0
}
export const useReveal = (content: string, slideOptions?: SlideOptions): REVEAL_STATUS => {
const [deck, setDeck] = useState<Reveal>()
const [isInitialized, setIsInitialized] = useState<boolean>(false)
const [revealStatus, setRevealStatus] = useState<REVEAL_STATUS>(REVEAL_STATUS.NOT_INITIALISED)
const currentSlideState = useRef<SlideState>(initialSlideState)
useEffect(() => {
if (isInitialized) {
if (revealStatus !== REVEAL_STATUS.NOT_INITIALISED) {
return
}
setIsInitialized(true)
setRevealStatus(REVEAL_STATUS.INITIALISING)
log.debug('Initialize with slide options', slideOptions)
const reveal = new Reveal({})
reveal
@ -27,27 +44,43 @@ export const useReveal = (content: string, slideOptions?: SlideOptions): void =>
.then(() => {
reveal.layout()
reveal.slide(0, 0, 0)
reveal.addEventListener('slidechanged', (event) => {
currentSlideState.current = {
indexHorizontal: event.indexh,
indexVertical: event.indexv ?? 0
} as SlideState
})
setDeck(reveal)
setRevealStatus(REVEAL_STATUS.INITIALISED)
log.debug('Initialisation finished')
})
.catch((error: Error) => {
log.error('Error while initializing reveal.js', error)
})
}, [isInitialized, slideOptions])
}, [revealStatus, slideOptions])
useEffect(() => {
if (!deck) {
if (!deck || revealStatus !== REVEAL_STATUS.INITIALISED) {
return
}
log.debug('Sync deck')
deck.layout()
}, [content, deck])
deck.sync()
deck.slide(currentSlideState.current.indexHorizontal, currentSlideState.current.indexVertical)
}, [content, deck, revealStatus])
useEffect(() => {
if (!deck || slideOptions === undefined || Object.keys(slideOptions).length === 0) {
if (
!deck ||
slideOptions === undefined ||
Object.keys(slideOptions).length === 0 ||
revealStatus !== REVEAL_STATUS.INITIALISED
) {
return
}
log.debug('Apply config', slideOptions)
deck.configure(slideOptions)
}, [deck, slideOptions])
}, [deck, revealStatus, slideOptions])
return revealStatus
}