Handling Fullscreen event

[jimdigrease]

Hi, Igor, is there ability to handle Fullscreen enter/exit-event without handling built-in events such as "fullscreenchange", "webkitfullscreenchange" etc.?

[igordanchenko]

Hi there! Indeed, I overlooked the fullscreen lifecycle callbacks. I'll go ahead and add them in v3.17.0

[jimdigrease]

It would be great!) My goal is to have ability to implement different style rules for basic and fullscreen mode. As far as I understand, fullscreen mode have built-in browser's styling except for inner elements, that styled as basic lightbox slides... Isn't it? At least I have not found any stylings for fullscreen-mode specifically in the component. Also I see some React-context in '\node_modules\yet-another-react-lightbox\dist\plugins\fullscreen\index.js' . Possibly it could appear as stupid question - sorry in this case), but can I use directly this context ((property) fullscreen: boolean) for my usecase? Or it doesn't work that way?

[igordanchenko]

My goal is to have ability to implement different style rules for basic and fullscreen mode.

If your different style rules can be implemented with just CSS, then you can probably use .yarl__fullscreen:fullscreen selector:

.yarl__fullscreen:fullscreen /* target specific lightbox element */ {
  /* styling rules */
}

As far as I understand, fullscreen mode have built-in browser's styling except for inner elements, that styled as basic lightbox slides... Isn't it?

YARL doesn't implement any specific styling in fullscreen mode.

Also I see some React-context in '\node_modules\yet-another-react-lightbox\dist\plugins\fullscreen\index.js' . Possibly it could appear as stupid question - sorry in this case), but can I use directly this context ((property) fullscreen: boolean) for my usecase? Or it doesn't work that way?

It's not currently exported from the plugin, but even if it were, you could use it only in a component residing below it in the React tree. I don't know if it's even applicable in your case.

Anyway, enterFullscreen and exitFullscreen callbacks are now available in v3.17.0

[jimdigrease]

Thanks for your answer and update! For simple CSS rules first variant works fine to me for now. But about callbacks, did i understand correctly how to use it in my component:

return (
  <Lightbox
    plugins={[Fullscreen]}
    on={{
      enterFullscreen: () =>  { /* My code, or */ },
      exitFullscreen: MyFunction
    }}
  />

[igordanchenko]

Correct.