Programatically enter full screen mode

[tcdsantos]

Hi,

I am trying to create a button that, when clicked, changes the VueFlux to full screen mode (instead of the default double click).

I am trying to do it (after the component has been mounted) using $refs and calling the enterFullScreen() method (defined in the DisplayController class) like this:

this.$refs.slider.Display.enterFullScreen()

but it fires an error in the console:

TypeError: Fullscreen request denied

Does anyone know how can i access this method using $refs? Or is there any other way of doing it?

Maybe a prop that could be changed from the parent component would be a great feature?

Thank you.

[ragnarlotus]

Hello, you should be able to call the method as you guessed, but the method is async

Take a look at this post if you don't know how to call it

I will take it into account for future versions and create an easier way :)

Regards!

[tcdsantos]

Thank you @DEULOS for replying!

I tried to call the async method by resolving the promise, this way:

this.$refs.slider.Display.enterFullScreen().then(result => {
   // success
}).catch(error => {
   console.log(error);
})

but i always get the same error in the console:

TypeError: Fullscreen request denied

It seams the browser is denying the fullscreen mode request...

Regards

[ragnarlotus]

And with the double click it works to you?

[tcdsantos]

Yes, with the double click it works...

[ragnarlotus]

Try calling toggleFullScreen instead of enterFullScreen, but as a normal function as it is not async

[tcdsantos]

Same error...

I had already tried to use toggleFullScreen method before with no success. However, i tried it again and i got the same error in the console.

😒

[ragnarlotus]

Ok, I will check it and let you know something before the week ends

[tcdsantos]

@DEULOS Thank you very much for your help!

[ragnarlotus]

Hello, I just did a test using a built version and with SSR to ensure none of those things where the cause.

I was able to toggle full screen successfully without a problem.

This are the changes that I did in the docs to do the test:

.vuepress > components > demos > home.vue

<demo
   ref="slider"

methods: {
   toggle() {
      console.log(this.$refs.slider.$children[0].Display.toggleFullScreen());
      this.$refs.slider.$children[0].Display.toggleFullScreen();
   }
}

In this example you can notice that I have to use the $children[0] because I use another component for all the demos but you should not. In any case, navigate through slider ref to reach the component.

[tcdsantos]

Hello @DEULOS,

Thank you! I got it working after reading your message and trying again, with a very similar code, without success.

Using your example, the problem was that i was calling the toggle function inside the mounted function of the component where the slider is being used (just for testing proposes). The problem with this test was that the request for fullscreen was NOT being called from inside a short running user-generated event handler and, due to that, the browser was denying it.

I just moved the call of the toggle function from the mounted function to a handler associated to the click event of a button (where i really wanted it) and it worked immediately.

The problem was not in VueFlux component. Sorry for the inconvenience.

[ragnarlotus]

No problem, glad that you found the solution.

Regards!