[IDEA] "Full Screen" Menu Option

[TamedShrew]

Hello,
I would find it very useful to be able to go Full Screen when using my smart phone to control moOde.

The reasons for this are:
1. On my "old" android phone this is not an option in Chrome.
2. The address bar obscures UI content.
3. It'd be nice to have an uncluttered view.

I realise you can get around this by Adding to the Home screen, but it's a bit of a palaver when the ip address shifts around sometimes.

Best regards,
Nick

[TamedShrew]

By the way, I implemented a similar thing a while ago and found these notes useful (particularly point 4):

1. Add the Fullscreen Button:
Firstly, you should add a button or some form of user interface that users can interact with to toggle fullscreen. This is crucial because modern browsers often require a user gesture, such as a click, to initiate fullscreen mode.

html

Code:

<button id="fullscreenBtn">Go Fullscreen</button>

2. Add JavaScript:
You can add JavaScript to toggle fullscreen mode when the button is clicked.

javascript

Code:

document.getElementById('fullscreenBtn').addEventListener('click', function() {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        document.documentElement.requestFullscreen();
    }
});

3. CSS (optional):
When the browser enters fullscreen mode, it might be useful to apply styles specific to this mode:

css

Code:

:fullscreen {
    /* styles for fullscreen mode */
    background-color: white; // Just an example
}

4. Handle Variations:
While the majority of modern browsers support the Fullscreen API, the method names can vary. You might need to use vendor-prefixed methods for compatibility:

javascript

Code:

function toggleFullscreen() {
    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
    } else {
        var docElm = document.documentElement;
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        } else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        } else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
    }
}

document.getElementById('fullscreenBtn').addEventListener('click', toggleFullscreen);

[Tim Curtis]

I tried some test code and it worked in Chrome on my Mac but not in Safari on my iPhone.

[Nutul]

I tried some test code and it worked in Chrome on my Mac but not in Safari on my iPhone.

I use that as well for my web-based ePub reader, but remembered that there were sone caveats, and indeed I found this in my code:

Code:

/// new WebKit (Chrome, Opera)
          [
              'webkitRequestFullscreen',
              'webkitExitFullscreen',
              'webkitFullscreenElement',
              'webkitFullscreenEnabled',
              'webkitfullscreenchange',
              'webkitfullscreenerror'
          ],
          /// old WebKit (Safari 5.1)
          [
              'webkitRequestFullScreen',
              'webkitCancelFullScreen',
              'webkitCurrentFullScreenElement',
              'webkitCancelFullScreen',
              'webkitfullscreenchange',
              'webkitfullscreenerror'
          ],

With particular attention to:

webkitFullscreenElement (Chrome) vs. webkitCurrentFullScreenElement (Safari)

Just my 2c.

[Tim Curtis]

I tried some test code and it worked in Chrome on my Mac but not in Safari on my iPhone.

I use that as well for my web-based ePub reader, but remembered that there were sone caveats, and indeed I found this in my code:

Code:

/// new WebKit (Chrome, Opera)
          [
              'webkitRequestFullscreen',
              'webkitExitFullscreen',
              'webkitFullscreenElement',
              'webkitFullscreenEnabled',
              'webkitfullscreenchange',
              'webkitfullscreenerror'
          ],
          /// old WebKit (Safari 5.1)
          [
              'webkitRequestFullScreen',
              'webkitCancelFullScreen',
              'webkitCurrentFullScreenElement',
              'webkitCancelFullScreen',
              'webkitfullscreenchange',
              'webkitfullscreenerror'
          ],

With particular attention to:

webkitFullscreenElement (Chrome) vs. webkitCurrentFullScreenElement (Safari)

Just my 2c.

I used some of the sample code from the API spec.
https://developer.mozilla.org/en-US/docs...screen_API

The spec mentions that requestFullScreen() doesn't work on iPhone but thats not the issue. The issue is more that the usage scenario seems unlikely because you would only use this if your Home Screen app was broken (how often does that happen?) and instead of easily creating a new one you just used the Browser as-is.

[Nutul]

The spec mentions that requestFullScreen() doesn't work on iPhone but thats not the issue. The issue is more that the usage scenario seems unlikely because you would only use this if your Home Screen app was broken (how often does that happen?) and instead of easily creating a new one you just used the Browser as-is.

If the fullscreen does not cover the phone status-bar at the top, so it will be as it is now with the home-screen link.

If the OP has issues with IP "shifting around sometimes" (whatever this might mean, regardless for whatever reason...) using the Pi's name is a better option; even better with the ".local" suffix. Never failed on me in 2+ years of uninterrupted daily use.

[TamedShrew]

Thanks for considering this, Tim. I can see how this is a can of worms and not worth it for most users. A minor niggle that I can easily live with, in what is in my opinion the best piece of music software out there. Cheers!

[TamedShrew]

If the OP has issues with IP "shifting around sometimes" (whatever this might mean, regardless for whatever reason...) using the Pi's name is a better option; even better with the ".local" suffix. Never failed on me in 2+ years of uninterrupted daily use.

You're right, I use that from my laptop, but I don't believe it's possible on Android phones (unless that's changed with newer versions of Android). Thanks.

[TamedShrew]

With particular attention to:

webkitFullscreenElement (Chrome) vs. webkitCurrentFullScreenElement (Safari)

Just my 2c.

Thanks for the info! It's never as simple as you first think.

[Nutul]

If the OP has issues with IP "shifting around sometimes" (whatever this might mean, regardless for whatever reason...) using the Pi's name is a better option; even better with the ".local" suffix. Never failed on me in 2+ years of uninterrupted daily use.

You're right, I use that from my laptop, but I don't believe it's possible on Android phones (unless that's changed with newer versions of Android). Thanks.

google-chrome-stable --app="http://moode-lounge.local?kiosk" --class=WebApp-moOdePlayer --user-data-dir=/home/xxxxxxxxx/.local/share/ice/profiles/moOdePlayer

This, at least in Linux, gives a better user experience, even if not in full-screen; more like an application.
Android definitely (since old versions...) offers the same functionality (though ATM I cannot remember what was the exact menu option), as I use various sites on an old tablet, including google mail and drive; just to have them look more "cool".