Added: support for real Fullscreen

This commit is contained in:
djmaze 2021-03-03 11:16:02 +01:00
parent 1a5bc09bb3
commit e770f28949
3 changed files with 31 additions and 32 deletions

View file

@ -15,7 +15,7 @@ import {
MessageSetAction
} from 'Common/EnumsUser';
import { $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings } from 'Common/Globals';
import { doc, $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings } from 'Common/Globals';
import { inFocus } from 'Common/Utils';
import { mailToHelper } from 'Common/UtilsUser';
@ -253,7 +253,13 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
}
},
fullScreenMode: value => $htmlCL.toggle('rl-message-fullscreen', value)
fullScreenMode: value => {
if (this.oContent) {
value ? this.oContent.requestFullscreen() : doc.exitFullscreen();
} else {
$htmlCL.toggle('rl-message-fullscreen', value);
}
}
});
MessageStore.messageViewTrigger.subscribe(() => {
@ -319,14 +325,6 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
return color;
}
fullScreen() {
this.fullScreenMode(true);
}
unFullScreen() {
this.fullScreenMode(false);
}
toggleFullScreen() {
try {
getSelection().removeAllRanges();
@ -403,16 +401,33 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
this.showFullInfo.subscribe(value => Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0'));
this.oHeaderDom = dom.querySelector('.messageItemHeader');
if (this.oHeaderDom) {
let el = dom.querySelector('.messageItemHeader');
this.oHeaderDom = el;
if (el) {
if (!this.resizeObserver) {
this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.debounce(50).bind(this));
}
this.resizeObserver.observe(this.oHeaderDom);
this.resizeObserver.observe(el);
} else if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
let event = 'fullscreenchange';
el = dom.querySelector('.b-message-view-wrapper');
if (!el.requestFullscreen && el.webkitRequestFullscreen) {
el.requestFullscreen = el.webkitRequestFullscreen;
event = 'webkit'+event;
}
if (el.requestFullscreen) {
if (!doc.exitFullscreen && doc.webkitExitFullscreen) {
doc.exitFullscreen = doc.webkitExitFullscreen;
}
this.oContent = el;
el.addEventListener(event, () =>
this.fullScreenMode((doc.fullscreenElement || doc.webkitFullscreenElement) === el)
);
}
const eqs = (ev, s) => ev.target.closestWithin(s, dom);
dom.addEventListener('click', event => {
ThemeStore.isMobile() && leftPanelDisabled(true);