+- Moode Forum (https://moodeaudio.org/forum)
+-- Forum: moOde audio player (https://moodeaudio.org/forum/forumdisplay.php?fid=3)
+--- Forum: Feature requests (https://moodeaudio.org/forum/forumdisplay.php?fid=8)
+--- Thread: [IDEA] "Full Screen" Menu Option (/showthread.php?tid=5904)
Pages:
1
2
"Full Screen" Menu Option - TamedShrew - 11-02-2023
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
RE: "Full Screen" Menu Option - TamedShrew - 11-02-2023
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);RE: "Full Screen" Menu Option - Tim Curtis - 11-02-2023
I tried some test code and it worked in Chrome on my Mac but not in Safari on my iPhone.
RE: "Full Screen" Menu Option - Nutul - 11-02-2023
(11-02-2023, 07:09 PM)Tim Curtis Wrote: 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.
RE: "Full Screen" Menu Option - Tim Curtis - 11-02-2023
(11-02-2023, 08:24 PM)Nutul Wrote:(11-02-2023, 07:09 PM)Tim Curtis Wrote: 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/Web/API/Fullscreen_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.
RE: "Full Screen" Menu Option - Nutul - 11-02-2023
(11-02-2023, 08:53 PM)Tim Curtis Wrote: 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.
RE: "Full Screen" Menu Option - TamedShrew - 11-03-2023
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!
RE: "Full Screen" Menu Option - TamedShrew - 11-03-2023
(11-02-2023, 09:07 PM)Nutul Wrote: 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.
RE: "Full Screen" Menu Option - TamedShrew - 11-03-2023
(11-02-2023, 08:24 PM)Nutul Wrote: 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.
RE: "Full Screen" Menu Option - Nutul - 11-03-2023
(11-03-2023, 08:44 AM)TamedShrew Wrote:(11-02-2023, 09:07 PM)Nutul Wrote: 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".