Ability to have an enter/exit function to fullscreen with their corresponding events

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
UI version : ‘8.7.0’
Core version : ‘8.7.4’

Detailed description of issue
Is it possible to have different methods to enter/exit fullscreen mode on top of the toggleFullScreen as well as their corresponding event such as

UI.addEventListener('fullscreenModeToggled', (event) => {
    console.log(event)
    const detail = event.detail
    console.log(detail.isInFullscreen)
})

The issue I’m facing is that the toggleFullScreen method triggers only when we enter the fullscreen mode not when exiting.

2

Hello user67,

I was able to reproduce the issue where its not triggered when exiting the fullscreen mode.

As a workaround you can implement a custom button that toggles fullscreen which calls the toggleFullScreen API:

instance.UI.toggleFullScreen()

Let me know if that works for you.

Best regards,
Tyler

3

Is there no way of fixing this or is this a limitation of the fullscreen api ?

Consequently, is there a way to extract the fullscreen button to the main header ?
I did venture a little bit through the api to add the button manually

       instance.UI.setHeaderItems((header) => {
            header.getHeader('default').push({
                img: UI.isFullscreen() ? 'icon-header-full-screen-exit' : 'icon-header-full-screen',
                index: -1,
                type: 'actionButton',
                title: 'Enter fullscreen',
                element: 'fullScreenButton',
                onClick: () => {
                    instance.UI.toggleFullScreen()
                },
            })
        })

Is there any way to have a different img when toggeling the fullscreen mode as well change the text (Enter fullscreen / Exit fullscreen)

4

A quick side note,
when I click the fullscreen button, the event gets triggered correctly, the issue shows up when u press the escape button.

1 Like
5

I am showing toolbar only in fullscreen mode. I am getting event for clicking exit full screen but when I press Escape button that time I didn’t get the event. any help for this?