Web and WebWorks Development

[tbassetto]

Hi,

I'm building an app for BlackBerry 10 and I used this code in config.xml:

<feature id="blackberry.app.orientation">
<param name="mode" value="portrait" />
</feature>

The problem: I have videos on this app, and when playing fullscreen they keep the portrait orientation. It would be great if I can allow landscape mode only when playing video fullscreen. Is that possible?

Thanks.

[DueNorth]

Currently the only way to do this would be to set the blackberry.app.orientation to AUTO.

When it detects orientation change, have it dynamically switch the corresponding CSS to make it show properly. 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Detect-screen-orientation-change...

You can also check here:

https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/Orientation

Hope this helps. 

[cdelcol]

Additional orientation api's were added in the last release:

https://developer.blackberry.com/html5/apis/blackberry.app.html#.eventrientationchange

https://developer.blackberry.com/html5/apis/blackberry.app.html#.lockOrientation

https://developer.blackberry.com/html5/apis/blackberry.app.html#.unlockOrientation

You can also see sample usage here in the test suite:

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/test/functional/automation/blackbe...

If it helps, maybe you could contribute an update to the samples app with added functionality?

[tbassetto]

Thanks, I think that could help me a lot  Do you know if it's possible to listen for events telling me when a video is going fullscreen or quitting fullscreen mode ?

[cdelcol]

https://developer.blackberry.com/html5/apis/blackberry.app.html#.event:windowstatechanged

It doesn't seem to be exceptionally well documented, but it is there.

[cdelcol]

Sorry, i just looked into this further. The windowState won't give you the correct information. "fullscreen" means the app is in the normal running state, not the full fideo screen mode like i thought. There may actually be a way to do it with HTML5 built-in functionality. Adobe has a test-suite that has some media tests that you you may want to check out:

https://github.com/adobe/webkit/blob/master/LayoutTests/media/context-menu-actions-expected.txt#L21

[tbassetto]

Ok thanks, I'll look into it. My other option will be to programmatically allow orientation change when entering the screen with videos and forcing back "portrait mode" when leaving it. Then, I'll have to adapt the layout only for this screen*.

*of course, the best solution would be to make the entire app usable with both orientation

[tbassetto · Accepted solution]

The following code seems to do it:

            document.addEventListener('webkitfullscreenchange', function(event) {

          var video = document.querySelector('video');

          if (video) {

            if (video.webkitDisplayingFullscreen) {

              blackberry.app.lockOrientation('landscape-primary');

            } else {

              blackberry.app.lockOrientation('portrait-primary');

            }

          }

        });

I'm a bit surprised to see that blackberry.app.unlockOrientation() does not "unlock" the orientation when it was set via config.xml. It kind of make sense (it only unlocks when it was setted using blackberry.app.lockOrientation() but then it would be great to have another function to reset what was set in config.xml.

[cdelcol]

It is great that it works. If I recall correctly we ran into a limitation when locking the orientation of the application, then trying to allow rotation later. One thing you might want to note is that once you "unlock" in the config.xml, you should ensure you have portrait/landscape splash screen support.