Feature Request: Fullscreen mode

[niklasgrewe]

Hi, thanks for this great integration into nextcloud. I love it. But it is possible to use it in fullscreen mode, without the blue nextcloud banner at top of the page?

onlyoffice in nextcloud with banner

onlyoffice in seafile without any banner

I know that i can open documents in new tab, but the blue nextcloud banner is always visible. I would like to see an option in settings, so i can easily switch on/off the fullscreen mode, to see more of my document.

[AndyXheli]

Yes, I agree with this. It would also be nice to have a X icon to close the document.

[violoncelloCH]

related to #445

[AndyXheli]

would this be related https://github.com/nextcloud/server/issues/24889

[Subnet-Masked]

It would definitely be nice to be able to hide the Nextcloud header when opening documents in a new tab. I often find myself with many open Nextcloud tabs because I click files when I am done, forgetting that the document opened in a new tab.

[tzxmaster]

A quick & dirty hack to make this work is to use the JSLoader App (from the app store) to inject this code in the page:

if ($('.app-onlyoffice').length || $('#onlyofficeFrame').lenght) {
    $('#header').remove();
    $('#content').attr('id', 'alt_content');
}

After you open the document, refresh the page once more and it will go fullscreen. Not the prettiest way but it can work until we get a real implementation

[urnash]

A quick & dirty hack to make this work is to use the JSLoader App (from the app store) to inject this code in the page:

if ($('.app-onlyoffice').length || $('#onlyofficeFrame').lenght) {
    $('#header').remove();
    $('#content').attr('id', 'alt_content');
}

After you open the document, refresh the page once more and it will go fullscreen. Not the prettiest way but it can work until we get a real implementation

Unfortunately, this does not work correctly, wrong top and bottom padding. But even if they were correct, the page size is shorter than necessary.

[tzxmaster]

A quick & dirty hack to make this work is to use the JSLoader App (from the app store) to inject this code in the page:

if ($('.app-onlyoffice').length || $('#onlyofficeFrame').lenght) {
    $('#header').remove();
    $('#content').attr('id', 'alt_content');
}

After you open the document, refresh the page once more and it will go fullscreen. Not the prettiest way but it can work until we get a real implementation

Unfortunately, this does not work correctly, wrong top and bottom padding. But even if they were correct, the page size is shorter than necessary.

It seems something changed and that hack no longer works. I tested it now and I get the same behavior as you

[romangb]

appending this to quick & dirty hack will fix the top $('#alt_content').css({"min-height": "calc(100% - 1px)", "margin-top": "50px"}); and this var content = document.getElementsByTagName('body'); var remspace = function(){ console.log("Fire event to increase page height"); var ifr = document.querySelectorAll('iframe[name="frameEditor"]'); if(ifr){ ifr[0].style.cssText += 'height: calc(100vh - 1px);'; content[0].removeEventListener('mouseover', remspace); } }; content[0].addEventListener('mouseover', remspace); is supposed to fix the bottom.

So the final script to be written in JavaScript loader

if ($('.app-onlyoffice').length || $('#onlyofficeFrame').lenght) {
    $('#header').remove();
    $('#content').attr('id', 'alt_content');
$('#alt_content').css({"min-height": "calc(100% - 1px)", "margin-top": "50px"});

var content = document.getElementsByTagName('body');
var remspace = function(){
    console.log("Fire event to increase page height");
    var ifr = document.querySelectorAll('iframe[name="frameEditor"]');
    if(ifr){
    ifr[0].style.cssText += 'height: calc(100vh - 1px);';
    content[0].removeEventListener('mouseover', remspace);
    }
};
content[0].addEventListener('mouseover', remspace);
} 

[tzxmaster]

I've written this small snippet if you want to test:

const button = document.createElement('button');
button.innerText = 'Fullscreen';
document.getElementById("header").appendChild(button);

button.addEventListener('click', () => {
  var elem = document.getElementById("onlyofficeFrame"); 
	elem.requestFullscreen();
})

It will add a new button in upper right corner and if you click on it it will make the page fullscreen.

You can test it using the console.

note: if you refresh the page (F5) while a document is open it will not work anymore because the "onlyofficeFrame" element will not be present anymore.

I've tested it with JSLoader app as well and it works.

[tzxmaster]

I've updated the code to work after refresh as well:

const button = document.createElement('button')
button.innerText = 'Fullscreen'
document.getElementById("header").children[1].prepend(button)

button.addEventListener('click', () => {
    var elem = document.getElementById("onlyofficeFrame");
    if (elem == null) {
        elem = document.getElementById("app-content");
    }
    if (elem == null) {
        elem = document.getElementById("app");
    }
    elem.requestFullscreen();
})

It will work with any app as well, not just for ONLYOFFICE. I've also moved the button to a better place.

https://gist.github.com/tzxmaster/55d34d1ed1dd9531389a72676685e9e4

I am very bad at UI/frontend stuff so if some CSS/JS guru can help us with a nice icon instead of a button, it would be nice.

[vagner-dias]

+1

Perhaps this could be implemented in the OnlyOffice NC App ? >> https://github.com/ONLYOFFICE/onlyoffice-nextcloud/issues/764

[vagner-dias]

Hello, Folks. I found this commit from collabora using the keyword allowfullscreen , and I think this could help fix the issue with the bottom of the screen. I just don´t know exactly how this can be implemented.

https://github.com/nextcloud/richdocuments/commit/ee5491b41a1718c94d1770929e49e49dbdaf565a#diff-982c3683c43a8fb4c83489c33d580c6d51f9a304c76da6cf5380f351b18f9180

Would this help somehow?

[romangb]

Script for JSLoader App that remove nextcloud header in shared application (for collaboration via public links)

//Remove header in fileshare application
if ($('#files-public-content').length) {
    $('#onlyofficeFrame').on('load', function () {
        $('#header').remove();
        $('#content').attr('id', 'alt_content');
        $('#alt_content').css({ "min-height": "calc(100% - 1px)", "margin-top": "50px" });

        var ifr = document.querySelectorAll('#onlyofficeFrame');
        ifr[0].style.cssText += 'height: calc(100vh - -57px);';
    });
}

[guojiaqiang89]

A quick & dirty hack to make this work is to use the JSLoader App (from the app store) to inject this code in the page:

if ($('.app-onlyoffice').length || $('#onlyofficeFrame').lenght) {
    $('#header').remove();
    $('#content').attr('id', 'alt_content');
}

After you open the document, refresh the page once more and it will go fullscreen. Not the prettiest way but it can work until we get a real implementation

It work good on Nextcloud23, When I change to Nextcloud 27, It dose not work.

I install jsloader manually, problem sloved. thanks!

[emes81]

I'd like to also add support for this; the upper-left link to the OnlyOffice website should be replaced with a link to return to the Nextcloud host

[Plinsboorg]

+1 for this feature

[SHU-red]

Also would like to see this

[emes81]

Another vote for this. For a more substantial reason, also.

Nextcloud currently recommends setting the "X-Frame-Options" HTTP header to "SAMEORIGIN". If not, the admin settings display this warning:

The "X-Frame-Options" HTTP header is not set to "SAMEORIGIN". This is a potential security or privacy risk, as it is recommended to adjust this setting accordingly.

However, adjusting that setting means that OnlyOffice can no longer be embedded in NC. More here:

https://forum.onlyoffice.com/t/nextcloud-28-0-2-onlyoffice-nginx-onlyoffice-inacessible-when-x-frame-options-set-to-sameorigin-always/7785/5

Collabora does not have this issue in Nextcloud. Hence, an option to remove the Nextcloud banner would not only be better from a UI perspective: it might also allow OnlyOffice to match current Nextcloud security standards.

[AlphaCraft9658]

I support this feature. There should be a fullscreen button or even a "Hide Nextcloud UI" button. The fullscreen button would enter fullscreen, hiding the Nextcloud UI and the browser UI, and the "Hide Nextcloud UI" button would just hide the top bar of Nextcloud and remove the border radius of the OnlyOffice wrapper/iframe so that all the UI elements of OnlyOffice are unobstructed.